/* eslint-disable no-console */
import { onMessage } from 'webext-bridge';
import { createApp } from 'vue';
import App from './views/App.vue';
import { message, notification } from 'ant-design-vue';
import { getStyle } from '~/utils/styles';

// Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
(() => {
  console.info('[小点] Hello world from content script');

  // communication example: send previous tab title from background page
  onMessage('tab-prev', ({ data }) => {
    console.log(`[小点] Navigate from page "${data.title}"`);
  });

  // mount component to context window
  const container = document.createElement('div');
  const root = document.createElement('div');
  root.style.position = 'fixed';
  root.style.backgroundColor = `rgba(0,0,0,0)`;
  root.style.left = `0px`;
  root.style.top = `0px`;
  root.style.bottom = `0px`;
  root.style.right = `0px`;
  root.style.pointerEvents = 'none';
  root.style.zIndex = `9999`;

  const styleEl = document.createElement('link');
  const styleEl3 = getStyle(`https://oss.hrtiger.cn/web-assets/antd.min.css`);
  // __DEV__ ? 'open' : 'closed'
  const shadowDOM = container.attachShadow?.({ mode: 'open' }) || container;
  styleEl.setAttribute('rel', 'stylesheet');
  styleEl.setAttribute(
    'href',
    browser.runtime.getURL('dist/contentScripts/style.css')
  );
  shadowDOM.appendChild(styleEl);
  shadowDOM.appendChild(styleEl3);
  shadowDOM.appendChild(root);
  document.body.appendChild(container);
  createApp(App).mount(root);
  message.config({ getContainer: () => root, top: `280px` });
  notification.config({ getContainer: () => root });
})();
